import React from 'react'
//表单
import { Form, Input, Button, Checkbox, message } from 'antd';
//栅格布局
import { Row, Col } from 'antd';
//按钮
import { LockTwoTone, UserOutlined } from '@ant-design/icons';
//图片
import zte from '../../assets/zte.png'

import './index.css'

import axios from '../../axios/request'


//15770667311

export default function Login() {
    function error(msg) {
        message.error(msg);
    };


    //登录获取用户信息
    async function onFinish(userInfo) {
        let { phone, password } = userInfo
        if (phone.trim().length === 11) {
            let { data } = await axios({
                url: '/v1/users/get',
                method: 'POST',
                headers: {
                    'isLoading': true
                },
                data: {
                    phone,
                    password
                }
            })
            console.log(data);
            if (data.code === 200) {
                //token值
                let { token } = data
                //用户名和权限
                let { name, powerid } = data.data[0]
                //保存用户名和权限到本地缓存
                localStorage.setItem('userInfo', JSON.stringify({
                    name,
                    powerid
                }))
                //保存token到本地缓存
                localStorage.setItem('token', token)
                if (powerid === 1) {
                    window.location.href = '/home/users'
                } else if (powerid === 2) {
                    window.location.href = '/home/classInfo'
                } else if (powerid === 3) {
                    window.location.href = '/home/classInfo'
                } else if (powerid === 4) {
                    window.location.href = '/home/classInfo'
                } else {
                    window.location.href = '/home/classInfo'
                }
            } else {
                error(data.msg)
            }


            // window.location.reload();

            //跳转
            // navigate('/home/users')


        } else {
            error('请输入正确的用户名')

        }
    }

    function onFinishFailed(err) {
        console.log(err);
    }


    return (
        <div style={{ height: '100vh' }} className="login">
            <div className='box'>
                <div style={{ display: 'flex' }}>
                    <Row style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                        <Col span={8} offset={4}>
                            <img src={zte} alt="zte" style={{ width: '100%', height: '100%' }} />
                        </Col>
                        <Col span={8} style={{ width: '400px', border: '1px solid #e7eaed' }}>
                            <Form
                                style={{ height: '300px' }}
                                name="basic"
                                labelCol={{
                                    span: 5,
                                }}
                                wrapperCol={{
                                    span: 15,
                                }}
                                initialValues={{
                                    remember: true,
                                }}
                                onFinish={onFinish}
                                onFinishFailed={onFinishFailed}
                                autoComplete="off"
                            >
                                <Col style={{ textAlign: 'center', fontSize: "20px", fontWeight: "bold", color: '#0178d6', height: '50px', marginTop: '10px' }}>欢迎登录</Col>
                                {/* 我的账号 */}
                                <Form.Item
                                    label={<UserOutlined style={{ fontSize: '20px', color: '#1890ff' }} />}
                                    name="phone"
                                    rules={[
                                        {
                                            required: true,
                                            message: '请输入正确的用户名!',
                                        },
                                    ]}
                                >
                                    <Input />
                                </Form.Item>
                                {/* 我的密码 */}
                                <Form.Item
                                    label={<LockTwoTone style={{ fontSize: '20px' }} />}
                                    name="password"
                                    rules={[
                                        {
                                            required: true,
                                            message: '请输入正确的密码!',
                                        },
                                    ]}
                                >
                                    <Input.Password />
                                </Form.Item>

                                <Form.Item
                                    name="remember"
                                    valuePropName="checked"
                                    wrapperCol={{
                                        offset: 5,
                                        span: 16,
                                    }}
                                >
                                    <Checkbox>记住我</Checkbox>
                                </Form.Item>

                                <Form.Item
                                    wrapperCol={{
                                        offset: 5,
                                        span: 15,
                                    }}
                                >
                                    <Button type="primary" htmlType="submit" offset={12} style={{ background: '#0178d6', borderColor: '#0178d6' }} block>
                                        登录
                                    </Button>
                                </Form.Item>
                            </Form>
                        </Col>
                    </Row>
                </div>
            </div>
        </div>
    )
}


